﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title></title>
    <script src="~/Content/UI/js/mui.min.js"></script>
    <script src="~/Content/UI/js/mdui.min.js" type="text/javascript" charset="utf-8"></script>
    <link href="~/Content/UI/css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="~/Content/UI/css/mdui.min.css" />
    <link rel="stylesheet" href="~/Content/UI/css/nav.css" />
    <link rel="stylesheet" href="~/Assets/Plugs/layer_mobile/need/layer.css" />

    <style>
        .mui-off-canvas-wrap .mui-bar {
            -webkit-box-shadow: 0 1px 6px #ccc;
            box-shadow: 0 1px 6px #ccc;
        }

        .mui-bar-nav {
            -webkit-box-shadow: 0 1px 6px #ccc;
            box-shadow: 0 1px 6px #ccc;
        }

        .title {
            height: 90px;
        }
    </style>
</head>
<body>
    <!-----悬浮按钮----->
    <div class="mdui-fab-wrapper" id="exampleFab" mdui-fab="{trigger: 'click'}">
        <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
            <!-- 默认显示的图标 -->
            <i class="mdui-icon material-icons">&#xe145;</i>

            <!-- 在拨号菜单开始打开时，平滑切换到该图标，若不需要切换图标，则可以省略该元素 -->
            <i class="mdui-icon mdui-fab-opened material-icons">&#xe254;</i>
        </button>
        <div class="mdui-fab-dial">
            <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-pink" onclick="history.go(-1);"><i class="mdui-icon material-icons">&#xe5cb;</i></button>
            <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-red" id="order-button"><i class="mdui-icon material-icons">&#xe8cc;</i></button>
            <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-orange" onclick="myFav();"><i class="mdui-icon material-icons">&#xe54e;</i></button>
            <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-blue" onclick="location.reload();"><i class="mdui-icon material-icons">&#xe5d5;</i></button>
        </div>
    </div>
    <!-- 缩放式侧滑（类手机QQ） -->
    <!-- 侧滑导航根容器 -->
    <div class="mui-off-canvas-wrap mui-draggable mui-scalable">
        <!-- 菜单容器 -->
        <aside class="mui-off-canvas-left mui-transitioning" id="offCanvasSide">
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <!-- 菜单具体展示内容 -->
                    <div class="title" style="width: 100%;">
                        <a href="#" id="head">
                            <img src="" class="img-responsive center-block head-circle" id="head_img" />
                        </a>

                    </div>
                    <div class="mui-content" id="user_menu_login">
                        <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right" id="profile">个人中心</a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right" id="order">我的书评</a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right" id="logout" href="javascript:;">注销</a>
                            </li>
                        </ul>

                    </div>

                    <div class="mui-content element-invisible" id="user_menu_unlogin">
                        <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right" href="/Account/Login" id="login">去登陆</a>
                            </li>

                        </ul>

                    </div>
                </div>
            </div>
        </aside>
        <!-- 主页面容器 -->
        <div class="mui-inner-wrap mui-transitioning">
            <!-- 主页面标题 -->
            <header class="mui-bar mui-bar-nav mdui-shadow-5">
                <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
                <a class="mui-btn mui-btn-link mui-pull-right" href="/Index/Home" id="home">
                    <i class="mui-icon mui-icon-home"></i>
                </a>
                <!--<div class="mui-title mui-search">
                     <input type="search" class="mui-input-clear" placeholder="">
                 </div>-->
                <!--<h1 class="mui-title">借阅伴侣</h1>-->
            </header>


            <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
                <div class="mui-scroll">
                    <!-- 主界面具体展示内容 -->
                    @RenderBody()



                </div>
            </div>
        </div>
    </div>
    <script src="~/Content/scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Assets/Plugs/layer/layer.js"></script>
    <script src="~/Content/UI/js/EventListenerOptions.polyfill.js"></script>
    <script src="~/Assets/Plugs/layer/extend/layer.ext.js"></script>
    <script src="~/Assets/Scripts/js.js"></script>
    <script src="~/Assets/Scripts/Msg.js"></script>
    <script type="text/javascript" charset="utf-8">
        //document.addEventListener('touchstart', function (event) {
        //    // 判断默认行为是否可以被禁用
        //    if (event.cancelable) {
        //        // 判断默认行为是否已经被禁用
        //        if (!event.defaultPrevented) {
        //            event.preventDefault();
        //        }
        //    }
        //}, false);
        $(function () {
            document.getElementById('login').addEventListener('tap', function (event) {
                self.location = "/account/login";
            }, false);
            document.getElementById('home').addEventListener('tap', function (event) {
                self.location = "/Index/Home";
            }, false);
        });
        mui.init({

            /*swipeBack: false,
        keyEventBind: {
            backbutton: false //关闭back按键监听
        },
        pullRefresh: {
            container: '#pullrefresh',
            up: {
                contentrefresh: '正在加载...',
                callback: pullupRefresh
            }
        }*/
        });

        var count = 0;
        /**
         * 上拉加载具体业务实现
         */
        function pullupRefresh() {
            setTimeout(function () {
                mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
                var table = document.body.querySelector('.mui-table-view');
                var cells = document.body.querySelectorAll('.mui-table-view-cell');
                /*for (var i = cells.length, len = i + 20; i < len; i++) {
                    var li = document.createElement('li');
                    li.className = 'mui-table-view-cell';
                    li.innerHTML = '<a class="mui-navigate-right">社会-Item ' + (i + 1) + '</a>';
                    table.appendChild(li);
                }*/
            }, 1000);
        }
        //获得slider插件对象
        var gallery = mui('.mui-slider');
        gallery.slider({
            interval: 4000//自动轮播周期，若为0则不自动播放，默认为0；
        });
        mui('#pullrefresh').scroll({
            indicators: true,
            deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
        mui('#pullrefresh').scroll();

        document.querySelector('.mui-off-canvas-wrap').addEventListener('shown', function (event) {
            if (typeof (localStorage.user) == 'undefined') {
                $('#head').attr('href', '/Account/Login');
                $('#head_img').attr('src', '/Content/UI/images/default.png');
                //未登录，请先登录
                $('#user_menu_login').remove();

            } else {
                var UID = localStorage.user;
                $.ajax({
                    url: '/Index/GetUserHead',
                    dataType: 'Json',
                    type: 'POST',
                    data: { 'UID': UID },
                    success: function (data) {
                        $('#head').attr('href', '/Profile/MyProfile/?uid=' + UID);
                        $('#head_img').attr('src', data['head']);
                        $('#user_menu_unlogin').remove();
                        $('#profile').attr('href', '/Profile/MyProfile/?uid=' + UID);
                        $('#order').attr('href', '/Review/MyReviews?uid=' + UID);
                        var onc = "bp_showFrame('/Review/MyReviews?uid=" + UID + "','我的书评')";
                        $('#order-button').attr('onclick', onc);
                    }
                });
            }
        })
        $(function () {
            if (typeof (localStorage.user) != 'undefined') {
                var UID = localStorage.user;
                var onc = "bp_showFrame('/Book/orderlist?uid=" + UID + "','我的订单')";
                $('#order-button').attr('onclick', onc);
            }
            document.getElementById('logout').addEventListener('tap', function (event) {
                localStorage.removeItem('user');
                $('#head').attr('href', '/Account/Login');
                $('#head_img').attr('src', '/Content/UI/images/default.png');
                //未登录，请先登录
                $('#user_menu_login').remove();
            }, false);
            mui('.mui-table-view-cell').on('tap', '.mui-navigate-right', function () {
                var href = this.getAttribute("href");
                self.location = href;
            });
        });
    </script>

    <script>
        function myFav() {
            var uid = localStorage.user;
            if (uid == 'undefined') {
                layer.open({
                    title: "错误",
                    content: "请先登陆！"
                });
            } else {
                location.href = "/Profile/MyFavorites?uid=" + uid;
            }
        }
        function bp_showFrame(url, title) {
            layer.open({
                type: 2,
                title: title,
                shadeClose: true,
                shade: 0.8,
                area: ['380px', '90%'],
                content: url //iframe的url
            });
            //layer.open({
            //    type: 1
            //    ,closeBtn: 1
            //    ,title: title
            //    , content: url
            //    , anim: 'up'
            //    , style: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;'
            //});
        }
    </script>
</body>
</html>